<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
    <link rel="stylesheet" href="../../static/acg/css/map.css"/>
    <style>

        .amap-overlay-text-container {
            padding: 2px 0 1px;
        }

        /* 弹出框 */
        .pop-lines {
            height: auto;
            background: #fff;
            padding: 5px;
            color: #000;
            font-weight: bold;
            margin: 0 auto;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            position: relative;
        }

        /* 弹出框底部三角 */
        .pop-lines::before {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 50%;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-top: 5px solid #fff;
        }

        /* 弹出框里面的图标的样式 */
        .pop-icon-lines {
            width: 15px;
            height: 15px;
            float: left;
            margin-right: 5px;
        }

        /* 弹出框的描述 */
        .pop-des-lines {
            color: #aaaaaa;
        }

        /* 线提示样式 */
        .line-hint {
            background: #f00;
            width: 15px;
            margin: 0 auto;
            line-height: 12px;
            font-size: 3px;
            word-wrap: break-word; /*英文的时候需要加上这句，自动换行*/
        }

        .mark_header {
            vertical-align: middle;
            padding-top: 16px;
            /*background: #f00;*/
        }

        .mark_header_img {
            float: left;
            width: 16px;
            height: 3px;
            border: 0;
            margin-left: 10px;
            margin-top: 5px;
        }

        .mark_header_name {
            text-align: center;
            line-height: 14px;
            float: left;
            font-size: 16px;
            font-weight: bold;
            color: #333333;
            margin-left: 10px;
            /*background: #00f;*/
        }

        .mark_des {
            margin-top: 20px;
            margin-left: 36px;
            color: #999999;
            font-size: 14px;
            /*background: #f0f*/
        }
    </style>
    <title>命格线</title>
</head>

<body>
{if condition="$error_msg!=''"}
{$error_msg}
{else /}
<div id="container"></div>
<!--蒙层-->
<div class="shade_container"></div>
<!-- 顶部信息条 -->
<div class="top" id="top">
    <!-- 顶部背景 -->
    <div class="top_bg"></div>
    <!-- 左侧用户描述 -->
    <div id="top_user_btn" class="top-left-container">
        <!-- 内容 -->
        <span id="top_user_namelines">{$name}</span>的幸运之城&nbsp;&nbsp;&nbsp;
        <!-- 箭头 -->
        <span id="arrow" class="arrow_down"></span>
    </div>
    <!-- 右侧 注释部分 -->
    <div class="info-btn">
        <!-- 右侧分割线 -->
        <div class="top_line"></div>
        <!-- 注释图标 -->
        <img src="../../static/acg/img/map_info.png" alt="">
        <!-- 注释文字 -->
        <a href="javascript:;" id="info_btn">注释</a>
    </div>
</div>
<!-- 用户详情 -->
<div id="user_detail" class="user_detail_class">本图根据出生数据生成，每条线上的城市会对<span id="user_detail_name">{$name}</span>产生不同的影响~
</div>
<!-- 命运之城或者线详情 -->
<div id="info_detail" class="info_detail_class">
    {foreach $lines as $k => $v}
    <div class="mark_header">
        <img class="mark_header_img" style="background:{$v.color};">
        <div class="mark_header_name">{$v.name}</div>
    </div>
    <div class="mark_des">{$v.des}</div>

    {/foreach}
</div>

<!-- 底部详情框 -->
<div id="card" class="bottom-card card_normal" style='width:90%;'>
    <!-- 城市的名字 -->
    <label id="current_city_name" style='color:#333333;font-size:18px;font-weight: bold;'></label>
    <!-- ***之城 -->
    <label id="current_fate_city_name" style='color:#333333;font-size:14px;'></label>
    <!-- 分割线 -->
    <div class="line"></div>
    <!-- 财富、桃花、学业 -->
    <div class="row-container">
        <label class="row-item" style="text-align: left;"><span id="score_name_0" class="row-item-name"></span><span
                id="score_value_0" class="row-item-value"> </span></label>
        <label class="row-item" style="text-align: center;"><span id="score_name_1"
                                                                  class="row-item-name"></span><span
                id="score_value_1" class="row-item-value"> </span></label>
        <label class="row-item" style="text-align: right;"><span id="score_name_2"
                                                                 class="row-item-name"> </span><span
                id="score_value_2" class="row-item-value"> </span></label>
    </div>
    <!-- 事业、幸运、健康 -->
    <div class="row-container">
        <label class="row-item" style="text-align: left;"><span id="score_name_3" class="row-item-name"> </span><span
                id="score_value_3" class="row-item-value"> </span></label>
        <label class="row-item" style="text-align: center;"><span id="score_name_4"
                                                                  class="row-item-name"> </span><span
                id="score_value_4" class="row-item-value"> </span></label>
        <label class="row-item" style="text-align: right;"><span id="score_name_5"
                                                                 class="row-item-name"> </span><span
                id="score_value_5" class="row-item-value"> </span></label>
    </div>
</div>

<!-- 底部下载条 -->
<div class="bottom" id="bottom">
    <div class="bottom_bg"></div>
    <div class="bo-left" id="close">x</div>
    <div class="bo-logo">
        <img src="/uploads/20180329/33503860a02a86f4c23d59ac75ec5b59.jpg" alt="">
    </div>
    <div class="bo-des">查看我的专属地图</div>
    <div class="bo-btn">
        <a href="javascript:;" id="btn">打开APP</a>
    </div>
</div>

<script src="/static/jquery-3.1.1.min.js"></script>
<script src="https://webapi.amap.com/maps?v=1.4.10&key=2990b0fec0fe543434c2692ce3369db4&plugin=AMap.Scale,AMap.OverView,AMap.ToolBar,AMap.DistrictSearch,AMap.Geocoder"></script>
<!--<script src="https://static.jmlk.co/scripts/dist/jmlink.min.js"></script>-->
<script>

    //隐藏 蒙层
    $(".shade_container").hide();

    var lon = {$lon};
    var lat = {$lat};
    var data = {$data};
    var address = {$address};
    var lines1 = {$lines1};
    var points = {$points};

    if (!address) {
        AMap.plugin('AMap.Geocoder', function () {
            var geocoder = new AMap.Geocoder({
                // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode，不传默认全国
            })

            var lnglat = [lon, lat]

            geocoder.getAddress(lnglat, function (status, result) {
                if (status === 'complete' && result.info === 'OK') {
                    // result为对应的地理位置详细信息
                    console.log(result)
                    address = result.regeocode.formattedAddress
                    document.getElementById('current_fate_city_name').innerText = address;
                }
            })
        })
    }

    //设置card的数据
    setBottomDetail();

    //创建信息窗体
    var infoWindow = new AMap.InfoWindow({
        isCustom: true,  //使用自定义窗体
        content: '',
        offset: new AMap.Pixel(-5, -15)
    });

    var map = new AMap.Map('container', {
        resizeEnable: true,
        // center: [116.397428, 39.90923], // 不设置 自动定位
        zoom: {$zoom},
        // lang: 'zh_en'
    });


    //***************显示默认的定位点部分******************
    //显示定位点的图标
    // 创建一个 Icon
    var startIcon = new AMap.Icon({
        // 图标尺寸
        size: new AMap.Size(18, 25),
        // 图标的取图地址
        image: {$city_loc},
        // 图标所用图片大小
        imageSize: new AMap.Size(18, 25),
        // 图标取图偏移量
        imageOffset: new AMap.Pixel(0, 0)
    });

    //创建标记，并添加到 map
    new AMap.Marker({
        map: map,
        icon: startIcon,
        position: [lon, lat],
        offset: new AMap.Pixel(-9, -25)
    });
    //***************显示默认的定位点部分******************


    //***************绘制线和能量点部分******************
    // 初始化绘制参数
    var options = [];
    options['strokeColor'] = '#3366FF'; // 画笔颜色
    options['strokeWeight'] = 2; // 画线宽度
    options['strokeOpacity'] = 1; // 透明度
    options['strokeStyle'] = 'dashed'; // 线样式，实线:solid，虚线:dashed
    options['zIndex'] = 50; // 线条层级
    options['fillColor'] = '#ffffff'; // 填充颜色
    options['fillOpacity'] = 1;// 填充透明度 1 不透明  0 完全透明
    options['radius'] = 6; // 圆半径


    var ASC = 17;
    var MC = 20;
    // 赤经赤纬是地理坐标在天球上的投影

    var optionsMC = {$optionsMC};
    var optionsIC = {$optionsIC};
    var optionsASC = {$optionsASC};
    var optionsASC2 = {$optionsASC2};
    var optionsDES = {$optionsDES};
    var optionsDES2 = {$optionsDES2};
    //竖直线上的点
    var optionsPoint = {$optionsPoint};
    //线上的文字
    var textOptions = {$textOptions};


    // 需要绘制的线有 日0月1水2金3火4木5土6天7海8冥9 北交点12   总共11个行星
    for (var i in optionsMC) {
        if (i >= ASC) break;
        //******* 行星-天顶 垂直线 *******
        options['strokeColor'] = optionsMC[i]['strokeColor'];
        options['path'] = optionsMC[i]['path'];
        DrawLine(options); // 绘制天顶线
        //******* 行星-天顶 垂直线 *******

        //*******画能量最强的点*******
        options['strokeWeight'] = 3;
        options['path'] = optionsPoint[i]['path'];
        options['planet'] = i;
        DrawCircle(options);// 能量最强的点
        //*******画能量最强的点*******

        //******* 行星-天底 垂直线 *******
        options['strokeWeight'] = 2;
        options['strokeColor'] = optionsIC[i]['strokeColor'];
        options['path'] = optionsIC[i]['path'];
        DrawLine(options); // 绘制天底线
        // ******* 行星-天底 垂直线 *******

        //******开始绘制上升线******
        options['path'] = optionsASC[i]['path'];
        options['strokeColor'] = optionsASC[i]['strokeColor'];
        DrawLine(options);
        options['path'] = optionsASC2[i]['path'];
        DrawLine(options);
        //******开始绘制上升线******

        //******开始绘制下降线******
        options['path'] = optionsDES[i]['path'];
        options['strokeColor'] = optionsDES[i]['strokeColor'];
        DrawLine(options);
        options['path'] = optionsDES2[i]['path'];
        DrawLine(options);
        //******开始绘制下降线******
    }
    textOptions.forEach(function (item) {
        LineText(item);//绘制文字IV
    })

    // Mod函数实现 地图经度为-180～180度 西经180度到东经180度
    function Mod(d) {
        d -= Math.floor(d / 360) * 360;

        if (d >= 180) d -= 360;

        else if (d < -180) d += 360;

        return d;
    }

    // 绘制直线 并返回该折线对象
    function DrawLine(options) {
        var polyline = new AMap.Polyline({
            path: options['path'],
            strokeColor: options['strokeColor'],
            strokeOpacity: options['strokeOpacity'],
            strokeWeight: options['strokeWeight'],
            strokeStyle: options['strokeStyle'],
            zIndex: options['zIndex'],
            lineJoin: 'round', // 坐标点连接方式
            lineCap: 'round'
        });

        polyline.setMap(map);

        return polyline;
    }

    /**
     * 绘制圆
     * @param options
     * @constructor
     */
    function DrawCircle(options) {
        var circleMarker = new AMap.CircleMarker({
            center: options['path'],
            radius: options['radius'],
            fillColor: options['fillColor'],
            fillOpacity: options['fillOpacity'],
            strokeColor: options['strokeColor'],
            strokeWeight: options['strokeWeight'],
            strokeOpacity: options['strokeOpacity'],
            zIndex: options['zIndex'],
            extData: {path: options['path'], planet: options['planet']}
        });

        map.add(circleMarker);

        //点击事件
        var onMarkerClick = function (e) {
            //赋值当前被选中的城市id
            console.log(e.target.getExtData());

            var planet = e.target.getExtData().planet;

            var item;
            if (planet == 12) {
                item = points[10];
            }
            for (var i = 0; i < points.length; i++) {
                // parseInt(points[i].pid)
                if (i == planet) {
                    item = points[i];
                }
            }
            console.log(item);
            if (!isEmpty(item)) {
                infoWindow.setContent('<div class=\"pop-lines\" ><img class=\"pop-icon-lines\" src=\"' + item.icon + '\"/>' + item.title + '<div class=\"pop-des-lines\">' + item.des + '</div>' + ' </div></div>');
                infoWindow.open(map, [e.target.getExtData().path[0], e.target.getExtData().path[1]]);
            }

        }
        circleMarker.on('click', onMarkerClick);
        return circleMarker;
    }

    //***************绘制线和能量点部分******************


    //***************线的提示部分******************
    //绑定地图拖动完成事件
    map.on('dragend', mapDragendMethod);
    // map.addControl(new AMap.ToolBar());
    // map.addControl(new AMap.Scale());

    map.on('complete', function () {
        // 地图图块加载完成后触发
        // console.log('map complete');
    });

    //所有的线提示标记
    var lines_hint_arr = new Array();


    function LineText(options) {
        // 创建纯文本标记
        var text = new AMap.Text({
            text: options['text'],
            style: {
                'border-radius': '3px',
                'background-color': options['color'],
                'width': '12px',
                'border-width': 0,
                // 'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)',
                'text-align': 'center',
                'font-size': '11px',
                'color': '#fff',
                'word-break': 'break-all',
                'white-space': 'pre-wrap',
                'word-wrap': 'break-word',
                'line-height': '12px'
            },
            position: options['path']
        });

        text.setMap(map);

        return text;
    }

    //地图拖动完成事件
    function mapDragendMethod() {
        // console.log('map dragend complete');

        // lines_hint_arr.forEach(function (marker, index) {
        //     map.remove(marker);
        // });
        //
        // for(var i in optionsMC){
        //     if (i>=ASC) break;
        //     // drawLinesHintMethod([optionsMC[i]['path'][0]['lng'],map.getCenter().lat]);
        //     // drawLinesHintMethod(i,[optionsIC[i]['path'][0]['lng'],map.getCenter().lat]);
        //     drawLinesHintMethod([optionsASC[i]['path'][0]['lng'],map.getCenter().lat]);
        // }
    }

    function drawLinesHintMethod(i, position) {
        // console.log('drawLinesHintMethod '+i+'['+position[0]+','+position[1]+']');
        //先移除之前已经增加的“线的提示”，然后再添加
        //线的提示
        var markerContent = '' +
            '<div class="line-hint">' +
            '命运线' +
            '</div>';
        var marker = new AMap.Marker({
            position: position,
            content: markerContent,
            offset: new AMap.Pixel(-13, -30)
        });

        //将“线的提示”添加到地图
        map.add(marker);
        //添加“线的提示”到数组中
        lines_hint_arr.push(marker);
    }

    //***************线的提示部分******************


    //设置底部内容
    function setBottomDetail() {
        //设置 当前地点 的名字
        document.getElementById('current_fate_city_name').innerText = address;
        //设置 得分列表
        for (var i = 0; i < 6; i++) {
            // console.log(data.score_list[i].name);
            document.getElementById('score_name_' + i).innerText = data.score_list[i].name;
            document.getElementById('score_value_' + i).innerText = data.score_list[i].percent;
            document.getElementById('score_value_' + i).style.cssText = "color:" + data.score_list[i].color + ";";
        }
    }


    //判断字符是否为空的方法
    function isEmpty(obj) {
        if (typeof obj == "undefined" || obj == null || obj == "") {
            return true;
        } else {
            return false;
        }
    }


    //*****top部分********
    //左侧顶部 是否展示收起，默认收起
    var isShowUserHint = 0;
    var isShowInfoHint = 0;
    var arrow = document.getElementById('arrow');
    // 顶部弹出、收起动画
    $(document).ready(function () {
        //顶部 左侧点击事件
        $(".top-left-container").click(function () {
            $(".info_detail_class").hide();
            $(".user_detail_class").slideToggle();
            arrowUpOrDown();

            if (isShowUserHint) {
                $(".shade_container").show();
            } else {
                $(".shade_container").hide();
            }

            if (isShowInfoHint) {
                isShowInfoHint = !isShowInfoHint;
            }
            // console.log('top-left-container is Clicked! isShowUserHint='+isShowUserHint+",isShowInfoHint="+isShowInfoHint);
        });
        // 顶部 右侧点击事件
        $(".info-btn").click(function () {
            if (isShowUserHint) {
                $(".user_detail_class").hide();
                arrowUpOrDown();
            }
            isShowInfoHint = !isShowInfoHint;

            $(".info_detail_class").slideToggle();
            if (isShowInfoHint) {
                $(".shade_container").show();
            } else {
                $(".shade_container").hide();
            }
            // console.log('info-btn is Clicked! isShowUserHint='+isShowUserHint+",isShowInfoHint="+isShowInfoHint);
        });
        // 蒙层点击事件
        $(".shade_container").click(function () {
            if (isShowUserHint) {
                $(".user_detail_class").slideToggle();
                arrowUpOrDown();
            }
            if (isShowInfoHint) {
                $(".info_detail_class").slideToggle();
                isShowInfoHint = 0;
            }
            $(".shade_container").hide();
            // console.log('shade_container is Clicked! isShowUserHint='+isShowUserHint+",isShowInfoHint="+isShowInfoHint);
        });

    });

    function arrowUpOrDown() {
        isShowUserHint = !isShowUserHint;
        if (isShowUserHint) {
            arrow.className = 'arrow_down arrow_up';
        } else {
            arrow.className = 'arrow_down';
        }
    }

    //*****top部分********

    //*****下载条部分********
    var download_url = 'http://www.goddessxzns.com';
    // var btn = document.getElementById('btn');
    // // 底部下载按钮 点击事件
    // btn.onclick = function () {
    //     // console.log('download_url is clicked!');
    //     if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
    //         var loadDateTime = new Date();
    //         window.setTimeout(function () {
    //                 var timeOutDateTime = new Date();
    //                 if (timeOutDateTime - loadDateTime < 5000) {
    //                     window.location = download_url;
    //                 } else {
    //                     window.close();
    //                 }
    //             },
    //             25);
    //         window.location = "iOSXZNSGoddessZhunle://";
    //     } else if (navigator.userAgent.match(/android/i)) {
    //         window.location = 'http://a.app.qq.com/o/simple.jsp?pkgname=com.constellation.goddess';
    //     } else {
    //         window.location = download_url;
    //     }
    // }
    // new Mlink({
    //     mlink:'https://axelkv.mlinks.cc/ABPB',//跳转至地图首页
    //     button:document.querySelector('a#btn')
    // });
    // new JMLink({
    //     jmlink: 'https://a0ue2y.jmlk.co/AA63',// 短链地址
    //     button: document.querySelector('a#btn'),
    //     plhparams: {
    //         target: 'local',
    //         link: 'acg_map?need_auth=1'
    //     }
    // });
    document.querySelector('a#btn').addEventListener('click',function(e){
        window.location = 'https://applink-zhunle.goddessxzns.com?app=zhunle&target=local&link='+encodeURIComponent('acg_map?need_auth=1');
    })
    // 底部关闭按钮 点击事件
    var close_btn = document.getElementById('close');
    close_btn.onclick = function () {
        // 隐藏下载条
        document.getElementById('bottom').style.display = 'none';
        // 设置描述部分的class
        var card = document.getElementById('card');
        card.className = 'bottom-card card_remove_download'
    }
    //*****下载条部分********
</script>
{/if}

{include file="../apps/web/view/public/sensors.html" /}
<script>
    var _hmt = _hmt || [];
    (function () {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?d09c76e42b7d952920cd58fc4c715cf0";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>

</body>

</html>
